<template>
  <div v-if="isShowModel" class="model-box">
      <!-- 弹出框 -->
    <div v-if="modelType == 'confirm'" class="model-content">
        <div class="model-inner">
            <div class="title">{{modelTitle}}</div>
            <div class="content">{{modelContent}}</div>
        </div>
        <div class="btn">
            <div @click="cancelEvent" class="btn-c cancel">{{cancelText}}</div>
            <div @click="confirmEvent" :style="{color:finalColor}" class="btn-c confirm">{{confirmText}}</div>
        </div>
    </div>
    <!-- 警告框 -->
    <div v-if="modelType == 'alert'" class="model-content">
        <div class="model-inner">
            <div class="title">{{modelTitle}}</div>
            <div class="content">{{modelContent}}</div>
        </div>
        <div class="btn" @click="confirmEvent" :style="{color:finalColor}">
            {{confirmText}}
        </div>
    </div>
    <!-- 输入框 -->
    <div v-if="modelType == 'prompt'" class="model-content">
        <div class="model-inner">
            <div class="title">{{modelTitle}}</div>
            <div class="content">{{modelContent}}</div>
            <input class="input" v-model="prompt" :placeholder="placeholder"/>
        </div>
        <div class="btn">
            <div @click="confirmEvent" :style="{color:finalColor}" class="btn-c confirm">{{confirmText}}</div>
            <div @click="cancelEvent" class="btn-c cancel">{{cancelText}}</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name:"model",
  props:{
      isShowModel:{
          type:Boolean,
          default:false
      },
      modelTitle:{
          type:String,
          default:""
      },
      modelContent:{
          type:String,
          default:"提示内容"
      },
      modelType:{
          type:String,
          default:"alert"
      },
      confirmColor:{
          type:String,
          default:"#007aff"
      },
      successEvent:{
          type:Function,
          default:null
      },
      confirmText:{
          type:String,
          default:"确定"
      },
      cancelText:{
          type:String,
          default:"取消"
      },
      prompt:{
          type:String,
          default:""
      },
      placeholder:{
          type:String,
          default:"请输入内容"
      }
  },
  computed:{
      finalColor(){
          var colorReg = /^#(?:[0-9a-f]{3}){1,2}$/i;
          return colorReg.test(this.confirmColor)?this.confirmColor:"#007aff"
      }
  },
  methods:{
      confirmEvent(){
          if(this.successEvent){
              if(this.modelType == 'prompt'){
                this.successEvent(this.prompt)
              }else{
                this.successEvent(true)
              }
              
              //this.showModel = false
          }else{
              //this.showModel = false
          }
      },
      cancelEvent(){
          if(this.successEvent){
              this.successEvent(false)
             // this.isShowModel = false
          }else{
             // this.isShowModel = false
          }
      }
  }
}
</script>
<style lang="less" scoped>
.model-box{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.15);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    .model-content{
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;
        background: #fff;
        .model-inner{
            padding: 15px;
            box-sizing: border-box;
            .title{
                text-align: center;
                font-weight: 500;
                font-size: 18px;
                color: #333;
                font-weight: bold;
            }
            .content{
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 16px;
                color: #333;
                word-break: break-all;
            }
            .input{
                margin:5px auto; 
                width: 100%;
                height: 32px;
                border: 1px solid rgba(0,0,0,.3);
                color: #333;
                padding: 0 10px;
                box-sizing: border-box;
            }
        }
        .btn{
            border-top: 1px solid #e5e5e5;
            height: 44px;
            line-height: 44px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 18px;
            .btn-c{
                flex-basis: 50%;
                text-align: center;
                &.confirm{
                    border-left: 1px solid #e5e5e5;
                    box-sizing: border-box;
                }
                &.cancel{
                    color: #666;
                }
            }
        }
        
    }
}
</style>


